<template>
  <div>
    <TopTitle>
      <template #title>
        <div style="display: flex;align-items: center">
          <div class="tag" v-if="isStudentUser">
            <el-tag v-if="detail.isStudy" type="success">已学习</el-tag>
            <el-tag v-else type="danger">未学习</el-tag>
          </div>
          <span>
            {{ detail.title }}
          </span>
        </div>
      </template>
    </TopTitle>

    <el-scrollbar class="scrollbar">
      <div class='chapterMain' v-loading='loading'>
        <UntieEdit :editContent='detail.classInfoDetail.dataContent'
                   :otherBigFiles='detail.classInfoDetail.files'></UntieEdit>
      </div>
    </el-scrollbar>

  </div>
</template>

<script setup>
import {apiStudyTrigger, teachDesignDetail} from '@/api/banke/class';
import UntieEdit from '@/components/PubEditor/UntieEdit.vue';
import TopTitle from '@/components/TopTitle.vue';
import {onUnmounted} from "vue";
import {isStudent} from "@/utils/auth";
import {useViewScrollbarHeight} from "@/utils/tools";

const isStudentUser = isStudent()
const loading = ref(true);
const detail = ref({
  title: '',
  classInfoDetail: {
    dataContent: '',
    files: [],
  },
});
let timeout = null

const {innerScrollbarHeightStyle} = useViewScrollbarHeight()

const props = defineProps({
  nodeid: {
    type: String,
    default: '',
  },
});
const nodeid = ref(props.nodeid);
watch(() => props.nodeid, (nv) => {
  clearTimeout(timeout)
  timeout = null
  loading.value = true;
  nodeid.value = nv;
  getChapterShow();
});

//获取每小节的详细内容
const getChapterShow = () => {
  teachDesignDetail(nodeid.value).then(res => {
    loading.value = false;
    detail.value = res.data;
    detail.value.classInfoDetail.files = res.data.classInfoDetail.files ? res.data.classInfoDetail.files : [];

    if (!res.data.isStudy && isStudentUser) {
      timeout = setTimeout(() => {
        if (timeout) apiStudyTrigger(nodeid.value).promise.then(() => detail.value.isStudy = true)
      }, 5000)
    }

  }).catch(() => {
    loading.value = false;
  });
};

onUnmounted(() => {
  clearTimeout(timeout)
  timeout = null
})


getChapterShow();

</script>

<style lang='scss' scoped>

@use '@/assets/styles/vars.module' as *;

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.scrollbar {
  height: v-bind(innerScrollbarHeightStyle);
}

.chapterMain {
  width: $rich-view-width;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

.fileList {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .item {
    padding-right: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: relative;

    .coloricon {
      font-size: 18px;
      margin-right: 5px;
    }

    .close {
      font-size: 20px;
      color: #ff5733;
      position: absolute;
      right: 8px;
      top: 0px;
      display: none;
      cursor: pointer;
    }

    &:hover {
      .close {
        display: block;
      }
    }
  }
}

</style>
